<template>
  <div class="box route-page">
    <section class="header">
      <a-page-header
        class="demo-page-header"
        style="border: 1px solid rgb(235, 237, 240)"
        title="收据详情"
        @back="backClick"
      >
      <template #backIcon>
        <close-outlined v-if="$route.query.isClose"/>
        <arrow-left-outlined v-else/>
      </template>
        <template #extra>
          <a-button @click="generateTemplate">生成</a-button>
          <a-button :disabled="detaiData.status !== 6" @click="issueClick"
            >发出
          </a-button>
          <a-button :disabled="detaiData.status !== 1" @click="recoveryClick"
            >回收
          </a-button>
          <a-button
            :disabled="detaiData.status !== 6 && detaiData.status !== 2"
            @click="voidClick"
            >作废
          </a-button>
        </template>
        <a-row type="flex" justify="space-between">
          <div>
            <a-row class="receipt-number">
              <a-col>收据编号:</a-col>
              <a-col>{{ detaiData.receipt_number }}</a-col>
            </a-row>
            <a-row :gutter="[48, 16]">
              <a-col>
                <a-statistic
                  title="开据日期"
                  :value="detaiData.issuer_time ? detaiData.issuer_time : '--'"
                />
              </a-col>
              <a-col>
                <a-statistic
                  title="收据金额"
                  :value="'￥' + detaiData.receipt_amounts"
                />
              </a-col>
            </a-row>
            <a-row :gutter="[48, 16]" style="padding: 10px 0px">
              <a-col> 支付方式：{{ detaiData.remit_type_txt }}</a-col>
              <a-col> 开据人：{{ detaiData.issuer_uname }}</a-col>
              <a-col> 费用名称：{{ detaiData.cost_name }}</a-col>
              <a-col> 费用类型：{{ detaiData.cost_type_txt }}</a-col>
            </a-row>
            <a-row>
              <a-col v-if="detaiData.apply_template">
                收据打印模板：
                <a-button
                  type="link"
                  @click="previewApplyTemplate(detaiData.apply_template)"
                  >{{ detaiData.apply_template.receiptName }}
                </a-button>
              </a-col>
            </a-row>
          </div>
          <div>
            <a-statistic
              title="状态"
              :value-style="{ color: colorData[detaiData.status] }"
              :value="detaiData.status_txt"
            />
          </div>
        </a-row>
      </a-page-header>
    </section>
    <section class="content">
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-card title="交款方">
            <a-form layout="vertical">
              <a-row :gutter="[16, 0]">
                <a-col :span="12">
                  <a-form-item label="交款单位">
                    <a-input
                      :value="detaiData.payment_company"
                      :disabled="true"
                    />
                  </a-form-item>
                  <!-- <a-descriptions layout="vertical">
                  <a-descriptions-item label="交款单位">{{
                    detaiData.payment_company
                  }}</a-descriptions-item>
                </a-descriptions> -->
                </a-col>
                <a-col :span="12">
                  <a-form-item label="交款人">
                    <a-input
                      :value="detaiData.payment_uname"
                      :disabled="true"
                    />
                  </a-form-item>
                  <!-- <a-descriptions layout="vertical">
                  <a-descriptions-item label="交款人">{{
                    detaiData.payment_uname
                  }}</a-descriptions-item>
                </a-descriptions> -->
                </a-col>
                <a-col :span="12">
                  <a-form-item label="电话">
                    <a-input
                      :value="detaiData.payment_phone"
                      :disabled="true"
                    />
                  </a-form-item>
                  <!-- <a-descriptions layout="vertical">
                  <a-descriptions-item label="电话">{{
                    detaiData.payment_phone
                  }}</a-descriptions-item>
                </a-descriptions> -->
                </a-col>
                <a-col :span="12">
                  <a-form-item label="地址">
                    <a-input
                      :value="detaiData.payment_address"
                      :disabled="true"
                    />
                  </a-form-item>

                  <!-- <a-descriptions layout="vertical">
                  <a-descriptions-item label="地址">{{
                    detaiData.payment_address
                  }}</a-descriptions-item>
                </a-descriptions> -->
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="收款方">
            <a-form layout="vertical">
              <a-row :gutter="[16, 0]">
                <a-col :span="12">
                  <a-form-item label="收款单位">
                    <a-input
                      :value="detaiData.collection_company"
                      :disabled="true"
                    />
                  </a-form-item>
                  <!-- <a-descriptions layout="vertical">
                    <a-descriptions-item label="收款单位">{{
                      detaiData.collection_company
                    }}</a-descriptions-item>
                  </a-descriptions> -->
                </a-col>
                <a-col :span="12">
                  <a-form-item label="收款人">
                    <a-input
                      :value="detaiData.collection_uname"
                      :disabled="true"
                    />
                  </a-form-item>

                  <!-- <a-descriptions layout="vertical">
                    <a-descriptions-item label="收款人">{{
                      detaiData.collection_uname
                    }}</a-descriptions-item>
                  </a-descriptions> -->
                </a-col>
                <a-col :span="12">
                  <a-form-item label="电话">
                    <a-input
                      :value="detaiData.collection_phone"
                      :disabled="true"
                    />
                  </a-form-item>

                  <!-- <a-descriptions layout="vertical">
                    <a-descriptions-item label="电话">{{
                      detaiData.collection_phone
                    }}</a-descriptions-item>
                  </a-descriptions> -->
                </a-col>
                <a-col :span="12">
                  <a-form-item label="地址">
                    <a-input
                      :value="detaiData.collection_address"
                      :disabled="true"
                    />
                  </a-form-item>
                  <!-- <a-descriptions layout="vertical">
                    <a-descriptions-item label="地址">{{
                      detaiData.collection_address
                    }}</a-descriptions-item>
                  </a-descriptions> -->
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card title="款项明细">
            <a-table
              :pagination="false"
              :dataSource="detailData"
              :columns="detailColumns"
              rowKey="id"
            >
              <template #title>
                <a-alert type="info" show-icon>
                  <template #message>
                    <span>金额合计：</span>
                    <span>{{ total }}</span>
                    <span>元</span>
                  </template>
                </a-alert>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card title="开据账单">
            <a-table
              :pagination="false"
              :dataSource="documentsData"
              :columns="documentsColumns"
              rowKey="id"
            >
              <template #bodyCell="{ text, record, index, column }">
                <template v-if="column.key === 'action'">
                  <a-button type="link" @click="detailsClick(record.bill_id)"
                    >查看详情
                  </a-button>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card title="备注">
            <a-col :span="24">
              <a-textarea
                :value="detaiData.remark"
                :auto-size="{ minRows: 2 }"
                :disabled="true"
              />
            </a-col>
          </a-card>
        </a-col>
      </a-row>
    </section>
    <a-modal
      v-model:visible="visible"
      title="生成收据"
      ok-text="确定并下载"
      @ok="handleOk"
    >
      <a-form layout="vertical">
        <a-form-item label="收据模板">
          <a-select
            v-model:value="tempValue"
            style="width: 100%"
            :options="templateOptions"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 预览合同 -->
    <ElectronContractModal
      :visible="electronContractVisible"
      :urlData="previewUrlData"
      :esignDetail="{
        esignCheck: true,
      }"
      title="在线预览"
      @close="electronContractVisible = false"
    />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import { CloseOutlined , ArrowLeftOutlined} from '@ant-design/icons-vue';
import utils from "@/common/utils/utils";
import ElectronContractModal from "../../../../components/ElectronContractModal/index.vue";

export default defineComponent({
  name: "receiptDetail",
  components: { ElectronContractModal,CloseOutlined,ArrowLeftOutlined },
  setup() {
    const $route = useRoute();
    const $router = useRouter();

    // 返回
    const backClick = () => {
      if (window?.microApp?.getData()?.isMainDrawer) {
        window?.microApp?.getData()?.closeDrawer();
      }else{
        $router.back();
      }
    };

    const detaiData = ref({});
    // 款项明细
    const detailData = ref([]);
    const detailColumns = [
      {
        title: "费用类型",
        dataIndex: "cost_type_txt",
      },
      {
        title: "金额",
        dataIndex: "receipt_amounts",
      },
    ];
    // 开据账单
    const documentsData = ref([]);
    const documentsColumns = [
      {
        title: "项目",
        dataIndex: "villageName",
      },
      {
        title: "楼宇",
        dataIndex: "buildName",
      },
      {
        title: "房号",
        dataIndex: "roomInfo",
      },
      {
        title: "租客",
        dataIndex: "owner_name",
      },
      {
        title: "费用类型",
        dataIndex: "cost_type_txt",
      },
      {
        title: "应收",
        dataIndex: "receivable_payment",
      },
      {
        title: "实收",
        dataIndex: "actual_payment",
      },
      {
        title: "开据金额",
        dataIndex: "receipt_amount",
      },
      {
        title: "应收日期",
        dataIndex: "receivable_payment_date",
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "action",
      },
    ];
    const total = ref(0);
    const detailList = () => {
      request
        .get("/org", "/receipt/detail", { group_key: $route.query.group_key })
        .then((res) => {
          detaiData.value = res.detail;
          documentsData.value = res.detail.billList;
          detailData.value = res.detail.costList;
          detailData.value.forEach((item) => {
            total.value = (
              Number(total.value) + Number(item.receipt_amounts)
            ).toFixed(2);
          });
        });
    };
    detailList();
    // 状态区分
    const colorData = {
      1: "#00b578",
      2: "#353535",
      5: "#353535",
      6: "#1890ff",
    };
    const tempValue = ref();
    const templateOptions = ref([]);
    const visible = ref(false);
    const generateTemplate = () => {
      request
        .post("/org", "/receipt/getTemplateList", {
          group_keys: [$route.query.group_key],
        })
        .then((res) => {
          templateOptions.value = res.templateList.map((item) => {
            return {
              value: item.id,
              label: item.name,
            };
          });
          tempValue.value = res.templateList[0].id;
          if(res.templateList.length == 1 ){
            handleOk()
          }else{
            visible.value = true;
          }
        });
    };
    const handleOk = (e) => {
      request
        .get("/org", "/receipt/create", {
          template_id: tempValue.value,
          group_key: $route.query.group_key,
        })
        .then((res) => {
          message.success("生成成功");
          visible.value = false;
          detailList();
          previewApplyTemplate(res.result)
        });
    };

    // 发出
    const issueClick = () => {
      utils.modalConfirm({
        content: `是否发送未发出的收据？`,
        centered: true,
        onOk: () => {
          request
            .post("/org", "/receipt/send", {
              group_keys: [$route.query.group_key],
            })
            .then((res) => {
              message.success("发出收据成功");
              detailList();
            });
        },
      });
    };
    // 回收
    const recoveryClick = () => {
      utils.modalConfirm({
        content: `是否收回已发出的收据？`,
        centered: true,
        onOk: () => {
          request
            .post("/org", "/receipt/recovery", {
              group_keys: [$route.query.group_key],
            })
            .then((res) => {
              message.success("回收收据成功");
              detailList();
            });
        },
      });
    };
    // 作废
    const voidClick = () => {
      utils.modalConfirm({
        content: `是否作废当前收据？`,
        centered: true,
        onOk: () => {
          request
            .put("/org", "/receipt/void", { group_key: $route.query.group_key })
            .then((res) => {
              message.success("作废当前收据成功");
              detailList();
            });
        },
      });
    };

    const detailsClick = (id) => {
      $router.push({
        name: "billDetail",
        query: {
          billId: id,
        },
      });
    };

    // 合同预览
    const electronContractVisible = ref(false);
    const previewUrlData = ref({});
    const previewApplyTemplate = (data) => {
      previewUrlData.value = {
        previewUrl: data.online_preview.previewUrl,
        url: data.fileUrl,
      };
      electronContractVisible.value = true;
    };

    return {
      detaiData,
      detailsClick,
      documentsColumns,
      documentsData,
      detailData,
      detailColumns,
      total,
      generateTemplate,
      colorData,
      previewApplyTemplate,
      handleOk,
      visible,
      tempValue,
      templateOptions,
      issueClick,
      recoveryClick,
      voidClick,
      backClick,
      electronContractVisible,
      previewUrlData,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    background-color: #fff;

    .receipt-number {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
    }
  }

  // :deep(.ant-statistic-title) {
  //   text-align: right !important;
  // }
  .content {
    flex: 1;
    padding: 10px;
    overflow: hidden auto;
  }
}
</style>
